<template>
  <div class="base-echart">
    <div ref="echartDivRef" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watchEffect, onUnmounted } from 'vue'
import useEchart from '../hooks/useEchart'
// import { useStore } from 'vuex'
import useLoginStore from '@/store/modules/login'
import { debounce } from '@/utils/old-methods'

const echartDivRef = ref(null)
// const store = useStore()
const loginStore = useLoginStore()
let stopWatchs = ref(null)

const props = defineProps({
  options: {
    type: Object,
    required: true,
    default: () => {}
  }
  // width: {
  //   type: String,
  //   required: true
  // },
  // height: {
  //   type: String,
  //   required: true
  // }
})

onMounted(() => {
  const { setOptions, updateSize } = useEchart(echartDivRef.value)

  // stopWatchs.value = loginStore.watch(
  //   (state) => {
  //     return state.user.index
  //   },
  //   () => {
  //     debounce(updateSize, 400)()
  //   }
  // )

  watchEffect(() => {
    setOptions(props.options)
    debounce(updateSize, 400)()
  })
})

onUnmounted(() => {
  if (stopWatchs.value) stopWatchs.value()
})
</script>

<style scoped lang="less">
.base-echart {
  width: 100%;
  height: 100%;
}
</style>
